/**
 * Created by jean.h.ma on 15/04/2018.
 */
import React from 'react'
import Base from '@codefree/badger/app/components/Base'
import {EventEmitter} from 'fbemitter'
import Master from '../../components/Master'
import {connect} from "react-redux"
import {sendMessage} from "../../ar/test";
import PropTypes from 'prop-types'

const testEmitter = new EventEmitter();
const EVENT_HELLO = "event_hello"

class A extends Base {
	render() {
		return (
			<div>
				<button type="button" onClick={() => {
					testEmitter.emit(EVENT_HELLO, `hello - ${Math.random()}`)
				}}>send `hello` to B
				</button>
			</div>
		);
	}
}

class B extends Base {
	constructor(props) {
		super(props);
		this.state = {
			message: ''
		}
		this.listener = null;
	}

	render() {
		return (
			<div>
				{this.state.message}
			</div>
		);
	}

	componentDidMount() {
		super.componentDidMount();
		this.listener = testEmitter.addListener(EVENT_HELLO, (message) => {
			this.updateState({
				message: {$set: message}
			})
		})
	}

	componentWillUnmount() {
		super.componentWillUnmount();
		this.listener.remove();
	}
}

@connect()
class C extends Base {
	render() {
		return (
			<div>
				<button type="button" onClick={() => {
					this.props.dispatch(sendMessage(`sdhfisdifuds -${Math.random()}`))
				}}>send `hello` to D
				</button>
			</div>
		);
	}
}

@connect(({test: {message}, application}) => {
	return {
		message,
		application
	};
})
class D extends Base {
	render() {
		console.log(this.props.application)
		return (
			<div>{this.props.message}</div>
		);
	}
}

export default class TestEvent extends Base {
	static contextTypes = {
		setting: PropTypes.object
	};

	render() {
		console.log(this.context)
		return (
			<Master>
				<A></A>
				<B></B>
				<C></C>
				<D></D>
			</Master>
		);
	}
}